<template>
    <div>
<h1>显示</h1>
<a href="/tj">去添加</a>


门店名称
<input type="text" v-model="page.name">
<input type="button" value="查询" @click="xianshi">
<table class="table"> 
    <thead>
        <tr>
            <th>门店名称</th>
            <th>店长名称</th>
            <th>手机号</th>
            <th>邮件</th>
            <th>照片</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="d in data">
            <td>{{ d.name }}</td>
            <td>{{ d.yonghuname }}</td>
            <td>{{ d.phone }}</td>
            <td>{{ d.email }}</td>
            <td> <img :src="'https://localhost:7029'+d.img" style="height: 60px;width: 60px;"></td>
            <td>
              <input type="button"  value="编辑" @click="xiugia(d.id)">
                <input type="button"  value="删除" @click="shanchu(d.id)">
            </td>
        </tr>
    </tbody>
</table>
一共{{ pageinfo.count }}条   一共{{ pageinfo.pagecount }}页  一页{{ page.pagesize }}条   当前第{{ page.pageindex }}页
 <input type="button" value="首页" @click="fanye(1)">
  <input type="button" value="上一页" @click="fanye(2)">
   <input type="button" value="下一页" @click="fanye(3)">
    <input type="button" value="尾页" @click="fanye(4)">
  <input type="button" v-for="d in pageinfo.pagecount":value="d" @click="xiaoanniu(d)">
    <select @change="xiala" v-model="page.pagesize">
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>

    <input type="text" v-model="page.pageindex"><input type="button" value="跳转" @click="tioahzuan">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router=useRouter();



const shanchu=(val:any)=>{
    if(!confirm("您确定要删除？"))
{
    return;
}
axios.get("/api/mendian/shanchu",{params:{id:val}}).then(res=>{
     if(res.data>0)
     {
        alert('删除成功');
      
        xianshi();
     }
     else{
        alert("删除失败");
     }
})
}

const xiugia=(val:any)=>{
    router.push({path:"/xg",query:{id:val}})
}

const fanye=(val:any)=>{
  if(val==1)
{
  page.value.pageindex=1;
  xianshi();
}

 if(val==2)
{
  if(page.value.pageindex>1)
{
  page.value.pageindex-=1;
   xianshi();
}
}

 if(val==3)
{
  if(page.value.pageindex<pageinfo.value.pagecount)
{
  page.value.pageindex+=1;
   xianshi();
}
}

 if(val==4)
{
  page.value.pageindex=pageinfo.value.pagecount;
  xianshi();
}
}

const xiala=()=>{
  page.value.pageindex=1;
  xianshi();
}

const tioahzuan=()=>{
  if(page.value.pageindex<=pageinfo.value.pagecount&&page.value.pageindex>0)
  {
    xianshi();
  } 
  else{
    page.value.pageindex=1;
    xianshi();
  }
}


const xiaoanniu=(val:any)=>{
  page.value.pageindex=val;
  xianshi();
}
const data=ref( [
    {
      "id": 1,
      "name": "string",
      "yonghuname": "string",
      "img": "string",
      "isdel": true,
      "phone": "string",
      "email": "string"
    }
  ])

  const page=ref({
    pageindex:1,
    pagesize:2,
    name:""
  })

  const pageinfo=ref({
     count:0,
     pagecount:0
  })
onMounted(()=>{
  xianshi();
})
  const xianshi=()=>{
    axios.get("/api/mendian/xianshi",{params:page.value}).then(res=>{
       data.value=res.data.list;


       pageinfo.value.count=res.data.count;
       pageinfo.value.pagecount=Math.ceil(pageinfo.value.count/page.value.pagesize);
    })
  }
</script>

<style scoped>

</style>




